<!-- 休闲娱乐页面 -->
<template>
  <view class="happy-page">
    <!-- 头部背景 -->
    <view class="zzy-top-backgroup">
      <image src="https://healthdao-oss.oss-cn-hangzhou.aliyuncs.com/wap/red_background.png" mode="widthFix" class="backgroud-image"></image>
    </view>
    <!-- 顶部自定义导航 -->
    <u-navbar fixed placeholder title="休闲娱乐" :autoBack="true" bgColor="transparent" :titleStyle="{ color: '#fff' }" leftIconColor="#fff"> </u-navbar>

    <image src="@/static/img/chaoshushi.png" style="width: 470rpx; height: 50rpx" class="m-t-60 m-l-30"></image>
    <view class="flex align-center">
      <view class="nav-item">
        <image src="@/static/img/meituan.png" style="width: 46rpx; height: 46rpx"></image>
        <view class="m-l-10">美团精选</view>
      </view>
      <view class="nav-item">
        <image src="@/static/img/douyin.png" style="width: 46rpx; height: 46rpx"></image>
        <view class="m-l-10">抖音精选</view>
      </view>
    </view>

    <!-- 列表 -->
    <view class="list-data">
      <view class="list-item" v-for="(item, index) in 5" :key="index">
        <image src="@/static/img/meituan.png" style="width: 226rpx; height: 226rpx"></image>
        <view class="flex1 flex-column-b m-l-20" style="align-items: start">
          <view class="flex align-center">
            <u-tag text="美团" plain size="mini"></u-tag>
            <view class="m-l-10" style="width: 300rpx">沐沐SPA会所影院足道</view>
          </view>
          <view class="font30">沐·香薰SPA70分钟沐·香薰SPA70分钟沐·香薰SPA70分钟</view>
          <view class="flex align-center">
            <view class="font38 text-red m-r-20">¥189</view>
            <u-tag text="5.3折" plain size="mini"></u-tag>
          </view>
          <view class="justify-b w100 align-center">
            <view class="text-red">预估：28.46积分</view>
            <view style="color: #a5a5a5" class="flex"><u-icon name="map"></u-icon>340m</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>

export default {
  data() {
    return {
      dataList: [],
      loading: true
    }
  },
  onLoad() {
    this.initData()
  },
  methods: {
    initData() {
      this.loading = false
    }
  }
}
</script>
<style>
page {
  background-color: #f3f3f3;
}
</style>
<style lang="scss" scoped>
// 导入colorUI
@import '/static/css/colorui/main.css';
@import '/static/css/colorui/icon.css';
.happy-page {
  width: 100%;
  position: absolute;

  /* 顶部背景图 start */
  .zzy-top-backgroup {
    width: 100%;
    z-index: 0;
    position: absolute;
    top: 0;

    .backgroud-image {
      width: 100%;
      // will-change: transform;
    }
  }
  /* 顶部背景图 end */

  .nav-item {
    height: 76rpx;
    padding: 15rpx 20rpx;
    background-color: #fff;
    position: relative;
    border-radius: 20rpx;
    display: flex;
    align-items: center;
    margin: 30rpx 0 30rpx 24rpx;
  }
  .list-data {
    padding: 0 24rpx;
    width: 100%;
    position: absolute;
    .list-item {
      width: 100%;
      height: 272rpx;
      padding: 24rpx;
      background-color: #fff;
      border-radius: 20rpx;
      margin-bottom: 30rpx;
      display: flex;
    }
  }
}
</style>
